<template>
  <el-container class="app-flex-1 pt-3 app-flex" style="overflow: auto">
    <el-aside width="320px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-active="$route.path" router mode="verticla">
        <el-menu-item
          v-if="role===1"
          index="/index/user-manage"
        >
          <i class="el-icon-user" />
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item
          index="/index/activity-manage"
        >
          <i class="el-icon-notebook-2" />
          <span slot="title">活动列表</span>
        </el-menu-item>
        <el-menu-item
          v-if="role===1"
          index="/index/award-manage"
        >
          <i class="el-icon-notebook-2" />
          <span slot="title">奖品列表</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container class="mx-5 app-white pt-3 app-flex-1">
      <router-view />
    </el-container>
  </el-container>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
export default Vue.extend({
  data() {
    return {
      menus: [],
      role: Number(JSON.parse(localStorage.getItem('userInfo')).role),
      currentMenuId: [],
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      news: [],
      notifys: [
        { title: '关于居家办公的通知',createTime: '20-09-08' },
        { title: '关于居家办公的通知',createTime: '20-09-08' },
        { title: '关于居家办公的通知',createTime: '20-09-08' },
        { title: '关于居家办公的通知',createTime: '20-09-08' }
      ],
      apps: [
        { name: 'oa自动化办公',icon: '',desc: '这是一个应用' },
        { name: 'oa自动化办公',icon: '',desc: '这是一个应用' },
        { name: 'oa自动化办公',icon: '',desc: '这是一个应用' },
        { name: 'oa自动化办公',icon: '',desc: '这是一个应用' },
        { name: 'oa自动化办公',icon: '',desc: '这是一个应用' },
        { name: 'oa自动化办公',icon: '',desc: '这是一个应用' }
      ],
      recentApps: [],
      collectionApps: []
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
    ])
  },
  mounted() {
    console.log(this.$route.path)
    // getAppMenu(1).then(res => {
    //   this.menus = res.data
    //   res.data.forEach(type => {
    //     this.currentMenuId.push(type.id + '')
    //   })
    // })
    // latelyAppUsed({ homeType: 1 }).then(res => {
    //   this.recentApps = res.data
    // })
    // collectedApp({ homeType: 1 }).then(res => {
    //   this.collectionApps = res.data
    // })
    // getPcNews().then(res => {
    //   this.news = res.data
    // })
  },
  methods: {
    selectMenu(index, indexPath) {
      this.currentMenuId = index
    },
    goToNews(artical) {
      window.open(artical.url)
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep .el-menu-item {
    padding: 0 20px;
}
::v-deep .el-menu {
  border-right: 0;
}
::v-deep .el-collapse-item__arrow {
    margin: 0 12px;
}
</style>>

